<template>
  <el-container class="home-container">
<!--    header-->
    <el-header>
      <img src="../assets/img/sign.png" alt="school_logo" class="pic">
      <span class="xiao" v-show="screenWidth<=360 ? false : true" >计算机组成原理虚拟仿真平台系统</span>
      <div>
        <span v-show="screenWidth<=630 ? false : true" style="padding-right: 10px">欢迎你,</span>
        <el-dropdown @command="handleCommand">
          <span class="pad-right">{{this.Userinfos.info.name}}{{chenghu}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="b">个人中心</el-dropdown-item>
            <el-dropdown-item command="a">点击退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
<!--    页面主体-->
    <el-container>
<!--      侧边栏-->
      <el-aside style="height:100%">
<!--        侧边栏菜单区域-->
        <el-menu class="aside" :router="true" :default-active="activePath" :unique-opened="true"
                 background-color="#344a5f"
                 text-color="#fff"
                 active-text-color="#f56c6c">
<!--          一级菜单-->
          <el-menu-item index="Experiment">
            <i class="el-icon-place"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu :index="item.id+''" v-for="item in (userrole === 'student' ? menulist : (userrole === 'teacher' ? techmenulist : rootmenulist))" :key="item.id">
<!--            一级菜单的模板区域-->
            <template slot="title">
<!--              图标-->
              <i :class="iconsObj[item.id]"></i>
<!--              文本-->
              <span slot="title"> {{item.authName}}</span>
            </template>
<!--            二级菜单-->
            <el-menu-item :index="subitem.path+''" v-for="subitem in item.smItem"
                          :key="subitem.authName" @click="saveNavState(subitem.path)">
              <template slot="title">
                <!--              图标-->
                <i class="el-icon-menu"></i>
                <!--              文本-->
                <span>{{subitem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
<!--      右侧内容主体-->
      <el-main>
<!--        路由占位符-->
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      // 获取屏幕宽度
      screenWidth: document.body.clientWidth,
      // 左侧菜单数据(学生菜单)
      menulist: [
        {
          id: 1,
          authName: '个人中心',
          smItem: [
            {
              authName: '修改密码',
              path: 'Userinfo'
            }]
        },
        {
          id: 2,
          authName: '作业管理',
          smItem: [
            {
              authName: '题目集',
              path: 'Exp'
            }]
        }
      ],
      // 教师菜单
      techmenulist: [
        {
          id: 1,
          authName: '学生管理',
          smItem: [
            {
              authName: '添加学生到班级',
              path: 'StuToClass'
            }]
        },
        {
          id: 2,
          authName: '班级管理',
          smItem: [
            {
              authName: '创建班级',
              path: 'AddClass'
            },
            {
              authName: '查询班级信息',
              path: 'ClassInfo'
            }]
        },
        {
          id: 3,
          authName: '题目管理',
          smItem: [
            // {
            //   authName: '创建题目',
            //   path: 'AddTest'
            // },
            {
              authName: '题 库',
              path: 'FindTest'
            },
            {
              authName: '题目集',
              path: 'AddSet'
            }
            // {
            //   authName: '查询题目集',
            //   path: 'FindSet'
            // }
          ]
        },
        {
          id: 4,
          authName: '作业管理',
          smItem: [
            {
              authName: '作业列表',
              path: 'Homework'
            }]
        },
        {
          id: 5,
          authName: '个人管理',
          smItem: [
            {
              authName: '个人中心',
              path: 'Userinfo'
            }]
        }
      ],
      // 管理员菜单
      rootmenulist: [
        {
          id: 1,
          authName: '用户管理',
          smItem: [
            {
              authName: '创建用户',
              path: 'CreateUser'
            },
            {
              authName: '修改用户信息',
              path: 'Users'
            },
            {
              authName: '个人中心',
              path: 'Userinfo'
            }]
        },
        {
          id: 2,
          authName: '班级管理',
          smItem: [
            {
              authName: '查询班级',
              path: 'SearchGroup'
            }]
        }
      ],
      // 左侧一级目录对应的图标
      iconsObj: {
        0: 'el-icon-s-home',
        1: 'el-icon-user-solid',
        2: 'el-icon-s-home',
        3: 'el-icon-s-cooperation',
        4: 'el-icon-s-data'
      },
      // 被激活的链接地址
      activePath: '',
      // 用户个人信息
      Userinfos: {
        info: []
      },
      fullWidth: document.documentElement.clientWidth,
      // 用户身份
      userrole: localStorage.getItem('role'),
      chenghu: localStorage.getItem('role') === 'student' ? '同学' : (localStorage.getItem('role') === 'teacher' ? '老师' : '管理员')
    }
  },
  created () {
    this.getUserinfo()
    this.checkToken()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    handleCommand(command) {
      if(command=== 'a'){
        this.logout()
      }
      else if(command === 'b') {
        this.JumpToUser()
      }
    },
    // 个人信息界面
    JumpToUser () {
      this.$router.push('/Userinfo')
    },
    // 退出登录
    logout () {
      window.sessionStorage.clear()
      localStorage.clear()
      this.$router.push('/login')
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    // 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = window.sessionStorage.getItem('activePath')
    },
    // 验证token是否失效
    async checkToken () {
      // + 'Bearer' + localStorage.getItem('token')
      const { data: res } = await this.$http.get('/user/verify/')
      console.log(res)
      if (res.status !== 200) {
        window.sessionStorage.clear()
        localStorage.clear()
        this.$router.push('/login')
      }
    },
    // 获取用户信息
    async getUserinfo () {
      if (localStorage.getItem('role') === 'student') {
        const { data: res } = await this.$http.get('/student/allTestSet/' + localStorage.getItem('username'))
        console.log(res)
        if (res.status !== 200) return this.$message.error(res.msg)
        this.Userinfos.info = res.data.info
        localStorage.setItem('name', res.data.info.name)
      } else if (localStorage.getItem('role') === 'teacher') {
        const { data: res } = await this.$http.get('/teacher/allTestSet/' + localStorage.getItem('username'))
        console.log(res)
        if (res.status !== 200) return this.$message.error(res.msg)
        this.Userinfos.info = res.data.info
        localStorage.setItem('name', res.data.info.name)
      } else {
        this.Userinfos.info.name = localStorage.getItem('username')
      }
    }
  }
  // mounted () {
  //   const that = this
  //   window.onresize = () => {
  //     return (() => {
  //       window.screenWidth = document.body.clientWidth
  //       that.screenWidth = window.screenWidth
  //       console.log(that.screenWidth)
  //       location.reload()
  //     })()
  //   }
  // }
}
</script>

<style scoped>
  .home-container {
    height: 100%;
  }
  .pic{
    height: 55px;
    padding-left: 1%;
  }
  .el-aside{
    background-image: linear-gradient(ghostwhite,whitesmoke);
  }
  .el-menu{
    border-right: none;
  }
  .el-header {
    background-color: #545c64;
    display: flex;
    justify-content: space-between;
    padding-left: 2px;
    align-items: center;
    color: whitesmoke;
    font-size: 25px;
  }
  @media screen and (max-width: 360px) {
    .xiao {
      width: 0;
    }
  }
  .xiao{
    font-size: 36px;
  }
  .pad-right{
    font-size: 25px;
    color: white;
    margin-right: 30px;
  }
  .aside{
    background: ghostwhite;
    height: 100%;
    width: 14.4vw;
    cursor: pointer;
    /*opacity: 0.8;*/
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    /*line-height: 22px;*/
  }

</style>
<style lang="less" scoped>
  //设置了行高和字体大小、高度颜色
  .el-submenu .el-submenu__title {
    font-size: 16px;
    width: 14vw;
    height: 6.48vh;
    margin: 0.6vw auto;
    margin-right: 1.04vw;
  }
  .el-menu-item {
    font-size: 16px;
    width: 14vw;
    height: 6.48vh;
    margin: 0.6vw auto;
    margin-right: 1.04vw;
  }

  .el-aside{
    width: 14.4vw !important;
    overflow: hidden;
  }
  /*@media all and (max-width: 768px) {*/
  /*  .el-aside{*/
  /*    width: 70px !important;*/
  /*    overflow: hidden;*/
  /*  }*/
  /*}*/
</style>
